<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
    .main{
        width: 500px;
        height: 300px;
        border: 1px solid #ccc;
        overflow: scroll;
    }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#home">
                        首页
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li><a href="#list">列表</a></li>
                <li class="dropdown">
                    <a href="#news" class="dropdown-toggle" data-toggle="dropdown">
                        新闻
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="main" data-spy="scroll">
    <div id="home">
        <h1>首页</h1>
        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. 
        Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan.
        Velit seitan mcsweeney's photo booth 3 wolf moon irure.
        Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them 
        et cardigan trust fund culpa biodiesel wes anderson aesthetic. 
        Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
    </div>
    <div id="list">
        <h1>列表</h1>
        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. 
        Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan.
        Velit seitan mcsweeney's photo booth 3 wolf moon irure.
        Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them 
        et cardigan trust fund culpa biodiesel wes anderson aesthetic. 
        Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
    </div>
    <div id="news">
        <h1>新闻</h1>
        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. 
        Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan.
        Velit seitan mcsweeney's photo booth 3 wolf moon irure.
        Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them 
        et cardigan trust fund culpa biodiesel wes anderson aesthetic. 
        Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
    </div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>


</body>
</html>